<!--
 * @Author: cgl
 * @Date: 2023-04-18 15:12:26
 * @LastEditors: cgl
 * @LastEditTime: 2023-08-28 16:04:33
 * @FilePath: \public-health-emergencies-fed:\radiation-hygiene-fe\src\views\resource\equipment.vue
 * @Description:
 *
 * Copyright (c) 2023 by cgl/微盛信息产业有限公司, All Rights Reserved.
-->
<template>
  <div class="app-container">
    <el-form
      class="searchform"
      :model="queryParams"
      ref="queryParams"
      size="small"
      label-width="80px"
    >
      <el-row :gutter="20">
        <el-col :span="7">
          <el-form-item label="仪器类型">
            <el-select
              style="width: 100%"
              v-model="queryParams.instrumentTypeCode"
              clearable
              placeholder="请选择"
            >
              <el-option
                v-for="item in instrumentTypeSelect"
                :key="item.value"
                :label="item.key"
                :value="item.value"
              >
              </el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label=" " label-width="0px">
            <el-input
              v-model="queryParams.keyword"
              placeholder="请输入仪器名称、编号、型号"
              clearable
            ></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="9">
          <el-form-item label-width="20px">
            <el-button
              type="primary"
              icon="el-icon-search"
              size="mini"
              @click="getList()"
              >搜索</el-button
            >
            <el-button icon="el-icon-refresh" size="mini" @click="reset()"
              >重置</el-button
            >
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>

    <div class="table-wrapper">
      <div class="tableoperation">
        <el-button
          type="primary"
          icon="el-icon-plus"
          size="mini"
          @click.native.prevent="openDialog()"
          >添加仪器</el-button
        >
        <el-button
          type="primary"
          icon="el-icon-s-tools"
          size="mini"
          @click.native.prevent="openToolboxDialog()"
          >工具箱</el-button
        >
        <el-button
          type="primary"
          icon="el-icon-upload2"
          size="mini"
          plain
          @click.native.prevent="openImportDialog()"
          >导入</el-button
        >
        <el-button
          type="warning"
          icon="el-icon-download"
          size="mini"
          plain
          @click="handleExport"
          :disabled="selections.length <= 0"
          >导出</el-button
        >
        <el-button
          style="float: right"
          :disabled="selection.length != 1"
          type="primary"
          icon="el-icon-upload"
          size="mini"
          @click.native.prevent="openUploadCer()"
          >上传证书</el-button
        >
      </div>

      <el-table
        v-loading="loading"
        ref="equipmentTable"
        :data="equipmentList"
        height="300px"
        @selection-change="handleSelectionChange"
        @select-all="selectAll"
        @row-dblclick="(row) => openDialog(row, '3')"
      >
        <el-table-column type="selection" width="50" align="center" />
        <el-table-column label="仪器名称" align="center" prop="equipmentName" />
        <el-table-column label="仪器编号" align="center" prop="equipmentNumber">
          <template slot="header">
            <div
              style="
                display: flex;
                align-items: center;
                justify-content: center;
              "
            >
              <span style="line-height: 1">仪器编号</span>
              <SortIcon
                :prop="'equipmentNumber'"
                :active-sort="activeSort"
                @sort-change="handleSortChange"
              />
            </div>
          </template>
          <template slot-scope="scope">
            <span>{{ scope.row.equipmentNumber }}</span>
          </template>
        </el-table-column>
        <el-table-column
          label="型号"
          align="center"
          prop="equipmentTypeNumber"
        />
        <!-- <el-table-column label="探测器" align="center" prop="detector"/> -->
        <el-table-column
          label="证书预警"
          align="center"
          :show-overflow-tooltip="true"
        >
          <template slot-scope="{ row }">
            <span
              v-for="(arr, key) in row.obj"
              :key="key"
              @click="openCerList(arr, 'warn')"
              class="viewfile"
            >
              {{ key + "(" + arr.length + ")本" }}
            </span>
          </template>
        </el-table-column>
        <!-- <el-table-column label="技术参数" align="center" prop="technicalParameter"/> -->
        <el-table-column label="证书情况" align="center">
          <template slot-scope="{ row }">
            <div>
              <el-button
                v-show="row.certificateCount && row.certificateCount != 0"
                type="primary"
                size="mini"
                plain
                @click="openCerList(row)"
                >证书({{ row.certificateCount }})本</el-button
              >
              <el-button
                v-show="!row.certificateCount"
                type="primary"
                size="mini"
                plain
                disabled
                >无证书</el-button
              >
            </div>
          </template>
        </el-table-column>
        <el-table-column align="center" label="操作" width="240">
          <template slot-scope="{ row }">
            <el-button @click.native.prevent="openDialog(row)" type="text">
              编辑
            </el-button>
            <el-button @click.native.prevent="openUseRecord(row)" type="text">
              使用记录
            </el-button>
            <el-button @click.native.prevent="openOutInRecord(row)" type="text">
              出入库记录
            </el-button>
            <el-button
              @click.native.prevent="handleDelete(row)"
              type="text"
              style="color: #f32d2d"
            >
              删除
            </el-button>
          </template>
        </el-table-column>
      </el-table>

      <pagination
        v-show="total > 0"
        :total="total"
        :page.sync="queryParams.pageNum"
        :limit.sync="queryParams.pageSize"
        @pagination="getList"
      />
    </div>

    <!-- 仪器弹框 -->
    <el-dialog
      :title="title"
      :visible.sync="dialogVisible"
      :close-on-click-modal="false"
      width="1000px"
      class="equipmentdialog"
      v-dialogDrag="true"
      append-to-body
    >
      <el-form
        :model="form"
        :disabled="status == '3'"
        :rules="rules"
        ref="form"
        size="small"
        label-width="120px"
      >
        <el-row style="display: flex; flex-wrap: wrap">
          <el-col :span="8">
            <el-form-item label="仪器名称" prop="equipmentName">
              <el-input
                v-model="form.equipmentName"
                placeholder="请输入"
                clearable
              />
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="仪器类型" prop="instrumentTypeCode">
              <el-select
                v-model="form.instrumentTypeCode"
                placeholder="请选择"
                @change="changeInstrumentTypeId"
                ref="instrumentTypeCode"
                sizi="mini"
              >
                <el-option
                  v-for="item in instrumentTypeSelect"
                  :key="item.value"
                  :label="item.key"
                  :value="item.value"
                >
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="型号" prop="equipmentTypeNumber">
              <el-input
                v-model="form.equipmentTypeNumber"
                placeholder="请输入"
                clearable
              />
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="编号" prop="equipmentNumber">
              <el-input
                v-model="form.equipmentNumber"
                placeholder="请输入"
                clearable
              />
            </el-form-item>
          </el-col>
          <!-- <el-col :span="8">
						<el-form-item label="技术参数" prop="technicalParameter">
							<el-input
								v-model="form.technicalParameter"
								placeholder="请输入"
								clearable
							/>
						</el-form-item>
					</el-col> -->
          <el-col :span="8">
            <el-form-item label="生产厂家">
              <el-select
                v-model="form.manufactureId"
                placeholder="请选择"
                filterable
                clearable
              >
                <el-option
                  v-for="item in manufactureSelectList"
                  :key="item.manufactureId"
                  :label="item.manufactureName"
                  :value="item.manufactureId"
                >
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <template v-if="form.instrumentTypeCode == '000'">
            <el-col :span="8">
              <el-form-item label="探测器" prop="detector">
                <el-input
                  v-model="form.detector"
                  placeholder="请输入"
                  clearable
                />
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="检测方法" prop="inspectionMethod">
                <el-input
                  v-model="form.inspectionMethod"
                  placeholder="请输入"
                  clearable
                />
              </el-form-item>
            </el-col>
          </template>

          <template v-if="form.instrumentTypeCode == '040'">
            <el-col :span="8">
              <el-form-item label="" prop="ionizationChamberR50">
                <div style="display: inline-block; line-height: 1" slot="label">
                  <span>电离室类型</span><br />
                  <span>(R50)</span>
                </div>
                <div style="display: flex">
                  <el-select
                    v-model="form.ionizationChamberR50"
                    placeholder="请选择"
                    clearable
                    @change="
                      (value) => {
                        if (value) {
                          const findRes = ionizationChamberTypeTRP.find(
                            (item) => item.type == value
                          );
                          if (findRes) {
                            currTRP.name = findRes.name;
                            currTRP.data = findRes.data;
                            currTRP.staff = findRes.staff;
                          }
                        } else {
                          currTRP.name = '';
                          currTRP.data = [];
                          currTRP.staff = [];
                        }
                      }
                    "
                  >
                    <el-option
                      v-for="item in ionizationChamberTypeTRP"
                      :key="item.type"
                      :label="item.name"
                      :value="item.type"
                    >
                    </el-option>
                  </el-select>

                  <el-popover placement="top-end" width="1000" trigger="hover">
                    <div>
                      <table
                        border="0"
                        cellspacing="0"
                        cellpadding="0"
                        align="center"
                        style="width: 100%"
                      >
                        <tr style="font-weight: bold">
                          <td style="width: 200px"></td>
                          <td
                            style="border-bottom: 1px solid #000"
                            v-for="(item, index) in currTRP.staff"
                            :key="index"
                          >
                            {{ item }}
                          </td>
                        </tr>
                        <tr>
                          <td>{{ currTRP.name }}</td>
                          <td
                            v-for="(item, index) in currTRP.data"
                            :key="index"
                          >
                            {{ item }}
                          </td>
                        </tr>
                      </table>
                    </div>
                    <span
                      style="margin-left: 5px"
                      slot="reference"
                      v-show="form.ionizationChamberR50"
                    >
                      <i
                        class="el-icon-info"
                        style="font-size: 20px; cursor: pointer"
                      ></i>
                    </span>
                  </el-popover>
                </div>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="" prop="ionizationChamberTpr2010">
                <div style="display: inline-block; line-height: 1" slot="label">
                  <span>电离室类型</span><br />
                  <span>(TRP20/10)</span>
                </div>
                <div style="display: flex">
                  <el-select
                    v-model="form.ionizationChamberTpr2010"
                    placeholder="请选择"
                    clearable
                    @change="
                      (value) => {
                        if (value) {
                          const findRes = ionizationChamberTypeR50.find(
                            (item) => item.type == value
                          );
                          if (findRes) {
                            currR50.name = findRes.name;
                            currR50.data = findRes.data;
                            currR50.staff = findRes.staff;
                          }
                        } else {
                          currR50.name = '';
                          currR50.data = [];
                          currR50.staff = [];
                        }
                      }
                    "
                  >
                    <el-option
                      v-for="item in ionizationChamberTypeR50"
                      :key="item.type"
                      :label="item.name"
                      :value="item.type"
                    >
                    </el-option>
                  </el-select>

                  <el-popover placement="top-end" width="1000" trigger="hover">
                    <div>
                      <table
                        border="0"
                        cellspacing="0"
                        cellpadding="0"
                        align="center"
                        style="width: 100%"
                      >
                        <tr style="font-weight: bold">
                          <td style="width: 150px"></td>
                          <td
                            style="border-bottom: 1px solid #000"
                            v-for="(item, index) in currR50.staff"
                            :key="index"
                          >
                            {{ item }}
                          </td>
                        </tr>
                        <tr>
                          <td>{{ currR50.name }}</td>
                          <td
                            v-for="(item, index) in currR50.data"
                            :key="index"
                          >
                            {{ item }}
                          </td>
                        </tr>
                      </table>
                    </div>
                    <span
                      style="margin-left: 5px"
                      slot="reference"
                      v-show="form.ionizationChamberTpr2010"
                    >
                      <i
                        class="el-icon-info"
                        style="font-size: 20px; cursor: pointer"
                      ></i>
                    </span>
                  </el-popover>
                </div>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="半径" prop="r">
                <el-input v-model="form.r" placeholder="请输入" clearable />
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="Km*Katt" prop="kmkatt">
                <el-input
                  v-model="form.kmkatt"
                  placeholder="请输入"
                  clearable
                />
              </el-form-item>
            </el-col>
          </template>
        </el-row>
      </el-form>

      <el-table
        v-if="status == '3'"
        :data="equipmentCertificateList"
        height="400"
        @row-dblclick="(row) => openUploadCer(row, '3')"
      >
        <el-table-column label="序号" type="index" align="center" width="50">
          <template slot-scope="scope">
            <div style="text-align: center;">{{ scope.$index + 1 }}</div>
          </template>
        </el-table-column>
        <el-table-column label="证书名称" align="center">
          <template slot-scope="{ row }">
            <span class="viewfile" @click="viewImg(row.certificateOssId)">
              {{ row.certificateName }}
            </span>
          </template>
        </el-table-column>
        <el-table-column
          label="证书编号"
          align="center"
          prop="certificateNumber"
        />
        <el-table-column
          label="证书有效期"
          align="center"
          prop="certificateValidity"
        />
        <el-table-column
          label="溯源机构"
          align="center"
          prop="institutionName"
        />
      </el-table>

      <div slot="footer">
        <el-button type="primary" v-if="status != '3'" @click="submitForm"
          >确 定</el-button
        >
        <el-button @click="dialogVisible = false">取 消</el-button>
      </div>
    </el-dialog>

    <!-- 证书弹框 -->
    <el-dialog
      ref="upload"
      :title="titleCer"
      :visible.sync="visibleCer"
      :close-on-click-modal="false"
      @close="closeExam"
      width="1000px"
      append-to-body
      class="dialogCer"
      v-dialogDrag="true"
    >
      <el-form
        :model="formCer"
        :disabled="statusCer == '3'"
        :rules="rulesCer"
        ref="formCer"
        size="small"
        label-width="110px"
      >
        <el-row v-if="statusCer != '3'">
          <el-col :span="8">
            <el-form-item label="仪器名称">
              <el-input v-model="formCer.equipmentName" disabled />
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="仪器编号">
              <el-input v-model="formCer.equipmentNumber" disabled />
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="证书名称" prop="certificateName">
              <el-input
                v-model="formCer.certificateName"
                placeholder="请输入"
              />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="8">
            <el-form-item label="证书类型" prop="certificateTypeCode">
              <el-select
                v-model="formCer.certificateTypeCode"
                placeholder="请选择"
                @change="changeCerType"
              >
                <el-option
                  v-for="item in certificateTypeSelectList"
                  :key="item.certificateTypeCode"
                  :label="item.certificateType"
                  :value="item.certificateTypeCode"
                >
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="证书编号" prop="certificateNumber">
              <el-input
                v-model="formCer.certificateNumber"
                placeholder="请输入"
              />
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item
              label="证书检定日期"
              prop="certificateCalibrationDate"
            >
              <el-date-picker
                style="width: 100%"
                v-model="formCer.certificateCalibrationDate"
                value-format="yyyy-MM-dd"
                type="date"
                placeholder="请选择"
                @change="
                  (value) => {
                    if (value && !formCer.certificateValidity) {
                      const yearAfterDate = parseTime(
                        new Date(value).setFullYear(
                          new Date(value).getFullYear() + 1
                        ),
                        '{y}-{m}-{d}'
                      );
                      const resultDate = parseTime(
                        new Date(yearAfterDate).setDate(
                          new Date(yearAfterDate).getDate() - 1
                        ),
                        '{y}-{m}-{d}'
                      );
                      formCer.certificateValidity = resultDate;
                    }
                  }
                "
              >
              </el-date-picker>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="8">
            <el-form-item label="证书有效期至" prop="certificateValidity">
              <el-date-picker
                style="width: 100%"
                v-model="formCer.certificateValidity"
                value-format="yyyy-MM-dd"
                type="date"
                placeholder="请选择"
              >
              </el-date-picker>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="溯源机构" prop="institutionId">
              <el-select
                v-model="formCer.institutionId"
                placeholder="请选择"
                filterable
                clearable
              >
                <el-option
                  v-for="item in institutionSelectList"
                  :key="item.institutionId"
                  :label="item.name"
                  :value="item.institutionId"
                >
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="16">
            <el-form-item
              :label="statusCer == '3' ? '证书文件' : '证书上传'"
              prop="certificateOssId"
            >
              <el-input v-model="formCer.certificateOssId" v-if="false" />
              <div class="box">
                <el-upload
                  ref="upload"
                  :action="upload.url"
                  :headers="upload.headers"
                  :on-preview="handlePreview"
                  :on-remove="handleRemove"
                  :on-success="handleFileSuccessSecond"
                  :before-upload="beforeAvatarUpload"
                  :file-list="fileList"
                  :limit="1"
                  :on-exceed="handleExceed"
                  :class="statusCer == '3' && 'viewCer'"
                  multiple
                >
                  <el-button
                    v-if="statusCer != '3'"
                    icon="el-icon-upload"
                    size="mini"
                    plain
                    type="primary"
                    >上传文件</el-button
                  >
                </el-upload>
              </div>
            </el-form-item>
          </el-col>
        </el-row>

        <el-table :data="formCer.equipmentCalibrationFactorList">
        <el-table-column label="序号" type="index" align="center" width="50">
          <template slot-scope="scope">
            <div style="text-align: center;">{{ scope.$index + 1 }}</div>
          </template>
        </el-table-column>
          <el-table-column
            label="校准因子"
            align="center"
            prop="name"
            width="300"
          >
            <template slot-scope="scope">
              <el-input
                v-model="scope.row.name"
                placeholder="请输入"
                size="mini"
                clearable
                style="width: 60%"
                :ref="`inputName_${scope.$index}`"
              />
            </template>
          </el-table-column>
          <el-table-column label="值" align="center">
            <template slot-scope="scope">
              <el-input
                v-model="scope.row.value"
                @blur="checkValue(scope.row)"
                placeholder="请输入"
                size="mini"
                clearable
                :ref="`inputValue_${scope.$index}`"
              />
            </template>
          </el-table-column>
          <el-table-column label="操作" align="center" width="100">
            <template slot-scope="scope">
              <el-button
                type="danger"
                plain
                @click="delCalibrationFactor(scope.$index)"
                >删除</el-button
              >
            </template>
          </el-table-column>
        </el-table>
        <div style="display: flex; justify-content: center; margin-top: 10px">
          <el-button type="primary" plain @click="addCalibrationFactor"
            >新增行</el-button
          >
        </div>
      </el-form>
      <div slot="footer">
        <el-button type="primary" @click="submitFormCer">确 定</el-button>
        <el-button @click="visibleCer = false">取 消</el-button>
      </div>
    </el-dialog>

    <!-- 证书列表弹框 -->
    <el-dialog
      title="查看证书"
      :visible.sync="visibleCerList"
      :close-on-click-modal="false"
      width="1300px"
      v-dialogDrag="true"
      append-to-body
    >
      <el-form
        disabled
        :model="formCerList"
        ref="form"
        size="small"
        label-width="80px"
        v-if="formCerList.status != 'warn'"
      >
        <el-row :gutter="20">
          <el-col :span="8">
            <el-form-item label="仪器名称">
              <el-input v-model="formCerList.equipmentName" />
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="仪器编号">
              <el-input v-model="formCerList.equipmentNumber" />
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>

      <el-table
        :data="formCerList.cerList"
        height="400"
        @row-dblclick="(row) => openUploadCer(row, '3')"
      >
        <el-table-column label="序号" type="index" align="center" width="50">
          <template slot-scope="scope">
            <div style="text-align: center;">{{ scope.$index + 1 }}</div>
          </template>
        </el-table-column>
        <el-table-column
          label="证书名称"
          align="center"
          min-width="80"
          :show-overflow-tooltip="true"
        >
          <template slot-scope="{ row }">
            <span class="viewfile" @click="viewFile(row.certificateOssId)">
              {{ row.certificateName }}
            </span>
          </template>
        </el-table-column>
        <el-table-column
          label="证书类型"
          align="center"
          prop="certificateTypeName"
          min-width="180"
        />
        <el-table-column
          label="证书编号"
          align="center"
          prop="certificateNumber"
          min-width="120"
          :show-overflow-tooltip="true"
        />
        <el-table-column
          label="证书有效期"
          align="center"
          prop="certificateValidity"
          min-width="90"
        />
        <el-table-column
          label="溯源机构"
          align="center"
          prop="institutionName"
          min-width="120"
          v-if="formCerList.status != 'warn'"
        />
        <el-table-column label="状态" align="center" min-width="60">
          <template slot-scope="{ row }">
            <span v-if="!row.warningType"> 正常 </span>
            <span v-if="row.warningType == 1"> 即将过期 </span>
            <span v-if="row.warningType == 2"> 已过期 </span>
          </template>
        </el-table-column>
        <el-table-column
          align="center"
          label="操作"
          width="100"
          v-if="formCerList.status != 'warn'"
        >
          <template slot-scope="{ row }">
            <el-button
              v-if="row.warningType != 2"
              @click.native.prevent="openUploadCer(row, formCerList)"
              type="text"
            >
              编辑
            </el-button>
            <el-button
              @click.native.prevent="handleDeleteCer(row)"
              type="text"
              style="color: #f32d2d"
            >
              删除
            </el-button>
          </template>
        </el-table-column>
      </el-table>

      <div slot="footer">
        <el-button @click="visibleCerList = false">关 闭</el-button>
      </div>
    </el-dialog>

    <div class="cusviewimgdialog" v-if="visibleImg">
      <img width="30%" :src="dialogImageUrl" alt="" />
      <span
        @click="visibleImg = false"
        class="el-image-viewer__btn el-image-viewer__close"
      >
        <i class="el-icon-close"></i>
      </span>
    </div>
    <el-dialog
      :visible.sync="recordDialogVisible"
      width="1200px"
      title="设备使用记录"
      append-to-body
    >
      <el-form style="margin-left: 20px" inline>
        <el-form-item label="使用时间" style="margin-bottom: 0">
          <my-time-picker
            style="width: 300px"
            :startTime.sync="recordListParams.createTimeStart"
            :endTime.sync="recordListParams.createTimeEnd"
          ></my-time-picker>
        </el-form-item>
        <el-form-item label-width="20px" style="margin-bottom: 0">
          <el-button
            type="primary"
            icon="el-icon-search"
            @click="getRecordList()"
            >搜索</el-button
          >
          <el-button icon="el-icon-refresh" @click="recordReset()"
            >重置</el-button
          >
        </el-form-item>
      </el-form>

      <use-record-list
        ref="useRecordList"
        :queryParams="recordListParams"
        :print-config="printRow"
        :showPrintBtn="true"
      ></use-record-list>
      <div slot="footer" class="dialog-footer">
        <el-button @click="recordDialogVisible = false">关闭</el-button>
      </div>
    </el-dialog>

    <!-- 导入对话框 -->
    <el-dialog
      :title="upload2.title"
      :visible.sync="upload2.open"
      width="400px"
      append-to-body
      @close="closeUpload2"
      v-dialogDrag="true"
    >
      <el-upload
        ref="upload2"
        :limit="1"
        :on-exceed="handleExceed2"
        accept=".xlsx, .xls"
        :headers="upload2.headers"
        :action="upload2.url"
        :disabled="upload2.isUploading"
        :on-progress="handleFileUploadProgress2"
        :on-success="handleFileSuccess2"
        :auto-upload="false"
        drag
      >
        <i class="el-icon-upload"></i>
        <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
        <div class="el-upload__tip text-center" slot="tip">
          <span>仅允许导入xls、xlsx格式文件。</span>
          <!-- <el-link type="primary" :underline="false" style="font-size:12px;vertical-align: baseline;" @click="handleDownloadImportTemplate">下载模板</el-link> -->
        </div>
      </el-upload>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="submitFileForm2">确 定</el-button>
        <el-button @click="upload2.open = false">取 消</el-button>
      </div>
    </el-dialog>

    <ToolBoxDialog :show.sync="showToolBoxDialog"></ToolBoxDialog>

    <EquInOutRecordDialog
      :show.sync="outInRecordDialogVisible"
      :row="currRow"
    ></EquInOutRecordDialog>
  </div>
</template>

<script>
import {
  equipmentList,
  equipmentExport,
  equipmentListing,
  xRayType,
  trpRayType,
  equipmentDetail,
  equipmentAdd,
  equipmentEdit,
  equipmentDelete,
  checkAcceptApply,
} from "@/api/resourse/equipment";
import { manufactureListing } from "@/api/basicData/manufacture";
import { instrumentTypeListing } from "@/api/resourse/equipmentType";
import {
  equipmentCertificateList,
  equipmentCertificateExport,
  equipmentCertificateListing,
  equipmentCertificateDetail,
  equipmentCertificateAdd,
  equipmentCertificateEdit,
  equipmentCertificateDelete,
} from "@/api/resourse/equipmentCertificate";
import {
  equipmentCertificateTypeListing,
  equipmentCertificateTypeDetail,
  getListByInspectionTypeCode,
} from "@/api/resourse/certificateType";
import { institutionListing } from "@/api/basicData/institution";
import { listOss, listByIds, delOss } from "@/api/system/oss";
import { getToken } from "@/utils/auth";
import useRecordList from "./useRecordList.vue";
import ToolBoxDialog from "./ToolBoxDialog.vue";
import { downloadJson } from "@/utils/request";
import SortIcon from "./sortIcon";
import EquInOutRecordDialog from "./EquInOutRecordDialog.vue";

export default {
  name: "equipmentCom",
  dicts: ["equipment_state", "calibration_unit"],
  components: { useRecordList, ToolBoxDialog, SortIcon, EquInOutRecordDialog },
  props: {
    height: {
      type: String | Number,
      default: 500,
    },
  },
  data() {
    return {
      // 查询参数
      queryParams: {
        pageNum: 1,
        pageSize: 10,
        orderByColumn: "",
        isAsc: "ascending",
      },
      recordListParams: {
        createTimeEnd: null,
        createTimeStart: null,
      },
      recordListParamsCache: {
        createTimeEnd: null,
        createTimeStart: null,
      },
      total: 0,
      dialogVisible: false,
      rules: {
        equipmentName: [
          { required: true, message: "仪器名称不能为空", trigger: "blur" },
        ],
        instrumentTypeCode: [
          { required: true, message: "仪器类型不能为空", trigger: "blur" },
        ],
        equipmentTypeNumber: [
          { required: false, message: "型号不能为空", trigger: "blur" },
        ],
        equipmentNumber: [
          { required: true, message: "编号不能为空", trigger: "blur" },
        ],
        // technicalParameter: [
        // 	{ required: false, message: "技术参数不能为空", trigger: "blur" },
        // ],
        detector: [
          { required: true, message: "探测器不能为空", trigger: "blur" },
        ],
        inspectionMethod: [
          { required: true, message: "检测方法不能为空", trigger: "blur" },
        ],
        calibrationUnit: [
          { required: true, message: "校准单位不能为空", trigger: "blur" },
        ],
        ionizationChamberR50: [
          {
            required: true,
            message: "电离室类型(R50)不能为空",
            trigger: "change",
          },
        ],
        ionizationChamberTpr2010: [
          {
            required: true,
            message: "电离室类型(TPR20、10)不能为空",
            trigger: "change",
          },
        ],
        r: [{ required: true, message: "半径不能为空", trigger: "blur" }],
        kmkatt: [
          { required: true, message: "Km*Katt不能为空", trigger: "blur" },
        ],
      },
      rulesCer: {
        certificateName: [
          { required: true, message: "证书名称不能为空", trigger: "blur" },
        ],
        certificateTypeCode: [
          { required: true, message: "证书类型不能为空", trigger: "blur" },
        ],
        certificateNumber: [
          { required: true, message: "证书编号不能为空", trigger: "blur" },
        ],
        institutionId: [
          { required: true, message: "溯源机构不能为空", trigger: "blur" },
        ],
        certificateCalibrationDate: [
          { required: true, message: "证书检定日期不能为空", trigger: "blur" },
        ],
        certificateValidity: [
          { required: true, message: "证书有效期不能为空", trigger: "blur" },
        ],
        calibrationUnit: [
          { required: true, message: "校准单位不能为空", trigger: "blur" },
        ],
        certificateOssId: [
          { required: true, message: "证书文件不能为空", trigger: "blur" },
        ],
      },
      // 机构列表
      equipmentList: [],
      // 表单参数
      form: {},
      loading: false,
      status: null,
      title: null,
      recordDialogVisible: false,
      outInRecordDialogVisible: false,
      // 勾选列表
      selection: [],
      formCerList: {},
      // 上传的图片列表
      fileList: [],
      // 用户导入参数
      upload: {
        // 是否显示弹出层（用户导入）
        open: false,
        // 弹出层标题（用户导入）
        title: "",
        // 是否禁用上传
        isUploading: false,
        // 是否更新已经存在的用户数据
        updateSupport: 0,
        // 设置上传的请求头部
        headers: {
          Authorization: "Bearer " + getToken(),
          "Content-Disposition": "inline",
        },
        // 上传的地址
        url: process.env.VUE_APP_BASE_API + "/system/oss/upload",
      },
      // 导入参数
      upload2: {
        // 是否显示弹出层（用户导入）
        open: false,
        // 弹出层标题（用户导入）
        title: "",
        // 是否禁用上传
        isUploading: false,
        // 是否更新已经存在的用户数据
        updateSupport: 0,
        // 设置上传的请求头部
        headers: { Authorization: "Bearer " + getToken() },
        // 上传的地址
        url: process.env.VUE_APP_BASE_API + "/basic/equipment/importData",
      },
      // 设备列表下拉框
      equipmentSelectList: [],
      // 校准因子下拉框
      calibrationFactorSelectList: [],
      // 生产厂家下拉框
      manufactureSelectList: [],
      // 溯源机构下拉框
      institutionSelectList: [],
      // 证书列表
      equipmentCertificateList: [],
      formExam: {},
      // 证书表单
      formCer: {
        equipmentCalibrationFactorList: [],
        certificateValidity: "",
      },
      loading: false,
      status: null,
      title: null,
      visibleExam: false,
      visibleCer: false,
      visibleExamList: false,
      visibleCerList: false,
      formExamList: [],
      formCerList: [],
      titleExam: null,
      titleCer: null,
      openRowExam: {},
      // 打开设备或证书列表的当行数据
      openRow: {},
      statusExam: null,
      statusCer: null,
      visibleImg: false,
      printRow: {},
      // 预览图片查询的url列表
      dialogImageUrlList: [],
      // 预览图片请求的url
      geturlList: [],
      // 证书类型下拉框
      certificateTypeSelectList: [],
      // 仪器类型下拉框
      instrumentTypeSelect: [],
      //打印数据
      printData: [],
      showToolBoxDialog: false,

      ionizationChamberTypeR50: [],
      ionizationChamberTypeTRP: [],

      currR50: {
        name: "",
        data: [],
        staff: [],
      },
      currTRP: {
        name: "",
        data: [],
        staff: [],
      },
      selections: [],
      activeSort: "",
      currRow: {},
    };
  },
  created() {
    this.getList();
    // 获取厂家下拉框
    this.getManufactureListing();
    // 获取溯源机构下拉框
    this.getInstitutionListing();
    // 获取仪器类型下拉框
    this.getInstrumentTypeSelect();
  },
  methods: {
    openUseRecord(row) {
      this.printRow = row;
      this.recordListParams.equipmentId = row.equipmentId;
      this.recordReset();
      this.recordDialogVisible = true;
    },
    openOutInRecord(row) {
      this.currRow = row;
      this.outInRecordDialogVisible = true;
    },
    recordReset() {
      let equipmentId = this.recordListParams.equipmentId;
      this.recordListParams = JSON.parse(
        JSON.stringify(this.recordListParamsCache)
      );
      this.recordListParams.equipmentId = equipmentId;
      this.getRecordList();
    },
    // 排序
    handleSortChange({ prop, order }) {
      this.queryParams.orderByColumn = prop;
      this.queryParams.isAsc = order;
      this.getList();
      this.activeSort = `${prop}${order}`;
    },
    getRecordList() {
      this.$nextTick(() => {
        this.$refs.useRecordList.getList();
      });
    },
    // 获取总列表
    getList() {
      this.loading = true;
      equipmentList(this.queryParams)
        .then((response) => {
          this.equipmentList = response.rows;
          this.total = response.total;
          this.equipmentList.forEach((item) => {
            let obj = {}; /*
						{
							"无证书": [{}, {}, {}],
							"即将过期": [{}, {}, {}],
						}
					*/
            if (item.waringCertificate) {
              item.waringCertificate.forEach((it) => {
                if (obj.hasOwnProperty(it.warningMsg)) {
                  obj[it.warningMsg].push(it);
                } else {
                  obj[it.warningMsg] = [it];
                }
              });
            }
            item.obj = obj;
            if (this.selection.find((t) => t.equipmentId == item.equipmentId)) {
              this.$nextTick(() =>
                this.$refs.equipmentTable.toggleRowSelection(item, true)
              );
            }
          });
          this.loading = false;
        })
        .catch((response) => {
          this.loading = false;
        });
    },
    // 获取生产厂家下拉框
    getManufactureListing() {
      manufactureListing().then((response) => {
        this.manufactureSelectList = response.data;
      });
    },
    // 获取溯源机构下拉框
    getInstitutionListing() {
      institutionListing().then((response) => {
        this.institutionSelectList = response.data;
      });
    },
    // 获取仪器类型下拉框
    getInstrumentTypeSelect() {
      instrumentTypeListing().then((response) => {
        this.instrumentTypeSelect = response.data;
      });
    },
    // 更改仪器类型
    changeInstrumentTypeId(val) {
      this.$nextTick(() => {
        this.$set(
          this.form,
          "instrumentTypeName",
          this.$refs.instrumentTypeCode.selectedLabel
        );
      });
    },
    addCalibrationFactor() {
      this.formCer.equipmentCalibrationFactorList.push({});
    },
    delCalibrationFactor(index) {
      this.formCer.equipmentCalibrationFactorList.splice(index, 1);
    },
    // 打开设备
    openDialog(row, status) {
      this.resetForm("form");
      if (row) {
        this.openRow = row;
        equipmentDetail(row.equipmentId).then((response) => {
          this.form = response.data;
          this.form.instrumentTypeCode =
            this.form.instrumentTypeCode &&
            this.form.instrumentTypeCode.toString();
          if (this.ionizationChamberTypeR50.length > 0) {
            const findRes = this.ionizationChamberTypeR50.find(
              (item) => item.type == this.form.ionizationChamberR50
            );
            if (findRes) {
              this.currR50.name = findRes.name;
              this.currR50.data = findRes.data;
              this.currR50.staff = findRes.staff;
            }
          }
          if (this.ionizationChamberTypeTRP.length > 0) {
            const findRes = this.ionizationChamberTypeTRP.find(
              (item) => item.type == this.form.ionizationChamberTpr2010
            );
            if (findRes) {
              this.currTRP.name = findRes.name;
              this.currTRP.data = findRes.data;
              this.currTRP.staff = findRes.staff;
            }
          }
          this.dialogVisible = true;
          if (status == "3") {
            this.status = "3";
            this.title = "查看仪器";
            equipmentCertificateListing(row.equipmentId).then((response) => {
              this.equipmentCertificateList = response.data;
            });
          } else {
            console.log("编辑回显id", this.form);
            this.status = "2";
            this.title = "编辑仪器";
          }
        });
      } else {
        this.form = {};
        this.status = "1";
        this.title = "添加仪器";
        this.dialogVisible = true;
      }

      if (this.ionizationChamberTypeR50.length <= 0) {
        xRayType()
          .then((res) => {
            this.ionizationChamberTypeR50 = res.data || [];
            if (this.form.ionizationChamberR50) {
              const findRes = this.ionizationChamberTypeR50.find(
                (item) => item.type == this.form.ionizationChamberR50
              );
              if (findRes) {
                this.currR50.name = findRes.name;
                this.currR50.data = findRes.data;
                this.currR50.staff = findRes.staff;
              }
            }
          })
          .catch((err) => {});
      }
      if (this.ionizationChamberTypeTRP.length <= 0) {
        trpRayType()
          .then((res) => {
            this.ionizationChamberTypeTRP = res.data || [];
            if (this.form.ionizationChamberTpr2010) {
              const findRes = this.ionizationChamberTypeTRP.find(
                (item) => item.type == this.form.ionizationChamberTpr2010
              );
              if (findRes) {
                this.currTRP.name = findRes.name;
                this.currTRP.data = findRes.data;
                this.currTRP.staff = findRes.staff;
              }
            }
          })
          .catch((err) => {});
      }
    },
    // 打开工具箱
    openToolboxDialog() {
      this.showToolBoxDialog = true;
    },
    // 打开导入弹框
    openImportDialog() {
      this.upload2.title = "导入仪器";
      this.upload2.open = true;
    },
    // 导出
    handleExport() {
      const ids = this.selections.map((item) => item.equipmentId);
      downloadJson(
        "/basic/equipment/export",
        ids,
        `仪器列表_${new Date().getTime()}.xlsx`
      );
    },
    /** 下载模板操作 */
    handleDownloadImportTemplate() {
      this.download(
        "/basic/equipment/downloadTemplate",
        {},
        `仪器导入模板.xlsx`
      );
    },
    // 文件上传中处理
    handleFileUploadProgress2(event, file, fileList) {
      this.upload2.isUploading = true;
    },
    // 文件上传成功处理
    handleFileSuccess2(response, file, fileList) {
      console.log("response", response);
      this.upload2.open = false;
      this.upload2.isUploading = false;
      this.$refs.upload2.clearFiles();
      this.$alert(
        "<div style='overflow: auto;overflow-x: hidden;max-height: 70vh;padding: 10px 20px 0;'>" +
          response.msg +
          "</div>",
        "导入结果",
        { dangerouslyUseHTMLString: true }
      );
      this.getList();
    },
    // 超出数量提示
    handleExceed2(files, fileList) {
      this.$message.warning(`当前限制选择 1 个文件`);
    },
    // 提交上传文件
    submitFileForm2() {
      this.$refs.upload2.submit();
    },
    // 关闭导入
    closeUpload2() {
      this.$refs.upload2.clearFiles();
    },
    // 打开证书（没row为添加，有row，formCerList为3则查看 否则为编辑）
    openUploadCer(row, formCerList) {
      this.resetForm("formCer");
      this.fileList = [];
      if (row) {
        getListByInspectionTypeCode(this.openRow.instrumentTypeCode).then(
          (response) => {
            this.certificateTypeSelectList = response.data;
          }
        );
        equipmentCertificateDetail(row.equipmentCertificateId).then(
          (response) => {
            this.formCer = response.data;
            if (formCerList != "3") {
              this.formCer.equipmentName =
                formCerList.equipmentName; /* 顺便显示 */
              this.formCer.equipmentNumber =
                formCerList.equipmentNumber; /* 顺便显示 */
            }
            if (response.data.certificateOssId) {
              listByIds(response.data.certificateOssId).then((response) => {
                this.fileList = response.data.map((item) => {
                  return {
                    name: item.originalName,
                    url: item.url,
                    ossId: item.ossId,
                  };
                });
              });
            }
            this.visibleCer = true;
          }
        );
        if (formCerList == "3") {
          this.statusCer = "3";
          this.titleCer = "证书详情";
        } else {
          this.statusCer = "2";
          this.titleCer = "编辑证书";
        }
      } else {
        getListByInspectionTypeCode(this.selection[0].instrumentTypeCode).then(
          (response) => {
            this.certificateTypeSelectList = response.data;
          }
        );
        this.formCer = {
          certificateOssId: null,
          equipmentCalibrationFactorList: [],
          equipmentName: this.selection[0].equipmentName /* 顺便显示 */,
          equipmentNumber: this.selection[0].equipmentNumber /* 顺便显示 */,
          certificateCalibrationDate:
            this.selection[0].certificateCalibrationDate,
          certificateValidity: "",
        };
        this.statusCer = "1";
        this.titleCer = "上传证书";
        this.visibleCer = true;
      }
      // }
    },
    // 打开证书列表
    openCerList(row, status) {
      if (status == "warn") {
        this.formCerList = { status: status, cerList: row };
        this.visibleCerList = true;
      } else {
        this.openRow = row;
        equipmentCertificateListing(row.equipmentId).then((response) => {
          this.formCerList = { ...row, cerList: response.data };
          this.visibleCerList = true;
        });
      }
    },
    // 更改证书类型带出校准因子
    changeCerType(val) {
      this.formCer.equipmentCalibrationFactorList = [];
      let findobj = this.certificateTypeSelectList.find(
        (item) => item.certificateTypeCode == val
      );
      if (findobj && findobj.calibrationFactors) {
        this.formCer.equipmentCalibrationFactorList.push(
          ...JSON.parse(JSON.stringify(findobj.calibrationFactors))
        );
      }
    },
    // 提交设备
    submitForm() {
      this.$refs["form"].validate((valid) => {
        if (!valid) return;
        if (this.status == "1") {
          equipmentAdd(this.form).then((response) => {
            this.$modal.msgSuccess("新增成功");
            this.dialogVisible = false;
            this.getList();
          });
        } else if (this.status == "2") {
          equipmentEdit(this.form).then((response) => {
            this.$modal.msgSuccess("修改成功");
            this.dialogVisible = false;
            this.getList();
          });
        }
      });
    },
    // 提交证书
    submitFormCer() {
      this.formCer.certificateOssId = this.fileList
        .map((item) => {
          if (item.ossId) {
            return item.ossId; /* 回显的列表格式 */
          } else if (item.response.data) {
            return item.response.data.ossId; /* 新上传的列表格式 */
          }
        })
        .join(",");
      this.$refs["formCer"].validate((valid) => {
        if (!valid) return;
        let emptyIndexN = this.formCer.equipmentCalibrationFactorList.findIndex(
          (item) => !item.name
        );
        let emptyIndexV = this.formCer.equipmentCalibrationFactorList.findIndex(
          (item) => !item.value
        );
        if (emptyIndexN != -1) {
          this.$modal.msgWarning("请输入校准因子");
          this.$refs[`inputName_${emptyIndexN}`].focus();
          return;
        }
        if (emptyIndexV != -1) {
          this.$modal.msgWarning("请输入校准因子值");
          this.$refs[`inputValue_${emptyIndexV}`].focus();
          return;
        }
        if (this.statusCer == "1") {
          this.formCer.equipmentId = this.selection[0].equipmentId;
          equipmentCertificateAdd(this.formCer).then((response) => {
            this.$modal.msgSuccess("上传成功");
            this.visibleCer = false;
            this.getList();
          });
        } else if (this.statusCer == "2") {
          equipmentCertificateEdit(this.formCer).then((response) => {
            this.$modal.msgSuccess("修改成功");
            this.visibleCer = false;
            equipmentCertificateListing(this.openRow.equipmentId).then(
              (response) => {
                this.formCerList.cerList = response.data;
                this.equipmentCertificateList = response.data;
              }
            );
            this.getList(); /* 刷新最外层列表 */
          });
        }
      });
    },
    // 删除
    handleDelete(row) {
      this.$modal
        .confirm(`是否确认删除仪器[${row.equipmentName}]？`)
        .then(() => {
          this.loading = true;
          return equipmentDelete(row.equipmentId);
        })
        .then(() => {
          this.loading = false;
          this.$modal.msgSuccess("删除成功");
          this.getList();
        })
        .finally(() => {
          this.loading = false;
        });
    },
    handleDeleteCer(row) {
      this.$modal
        .confirm(`是否确认删除该证书？`)
        .then(() => {
          return equipmentCertificateDelete(row.equipmentCertificateId);
        })
        .then(() => {
          this.$modal.msgSuccess("删除成功");
          this.openCerList(this.openRow); /* 刷新当前证书列表 */
          this.getList(); /* 刷新最外层列表 */
        })
        .finally(() => {});
    },
    // 关闭证书
    closeExam() {
      this.$refs.upload.clearFiles();
      this.resetForm("formCer");
    },
    //全部取消勾选时清空selection
    selectAll(val) {
      val.length == 0 ? (this.selection = []) : null;
    },
    // 更改勾选
    handleSelectionChange(selection) {
      this.selections = selection;
      selection.forEach((t) => {
        if (!this.selection.find((item) => item.equipmentId == t.equipmentId)) {
          this.selection.push(t);
        }
      });
      let unSelect = this.equipmentList.filter((t) => !selection.includes(t));
      this.selection = this.selection.filter(
        (t) => !unSelect.find((item) => item.equipmentId == t.equipmentId)
      );
      this.$emit("change", this.selection);
    },
    // 表单重置
    reset() {
      this.queryParams = {
        pageNum: 1,
        pageSize: 10,
      };
      this.resetForm("queryParams");
      this.getList();
    },
    // 校验校准因子值的格式
    checkValue(row) {
      console.log("value", row.value);
      if (isNaN(row.value)) {
        this.$set(row, "value", "");
        this.$modal.msgWarning("请输入正确的格式");
      }
    },
    // 列表文件预览
    viewFile(ossId) {
      if (ossId) {
        listByIds(ossId).then((response) => {
          window.open(response.data[0].url, "PDF", "");
        });
      } else {
        this.$modal.msgWarning("暂无文件");
      }
    },
    // 列表的预览图片
    viewImg(ossId) {
      this.geturlList = [];
      listByIds(ossId).then((response) => {
        window.open(response.data[0].url, "PDF", "");
      });
    },
    // 弹框文件预览
    handlePreview(file, fileList) {
      // 上传时
      if (file.response && file.response.data) {
        window.open(file.response.data.url, "PDF", "");
      } else if (file.url) {
        window.open(file.url, "PDF", "");
      }
    },
    // 文件移除
    handleRemove(file, fileList) {
      this.fileList = fileList;
    },
    // 文件上传成功处理
    handleFileSuccessSecond(response, file, fileList) {
      if (response.code == 500) {
        this.$modal.msgWarning(response.msg);
      }
      this.fileList = fileList;
    },
    // 提交上传文件
    submitFileForm() {
      this.$refs.upload.submit();
    },
    // 上传前
    beforeAvatarUpload(file) {
      let isPDF = file.type === "application/pdf";
      if (!isPDF) {
        this.$message.warning("仅支持pdf格式，请重新上传!");
      }
      return isPDF;
    },
    // 超出数量提示
    handleExceed(files, fileList) {
      this.$message.warning(`当前限制选择 1 个文件`);
    },
  },
};
</script>

<style lang="scss" scoped>
.tag {
  border: 1px solid #319ed8;
  background: #12b9f64a;
  color: #0892ff;
  padding: 0 5px;
  border-radius: 3px;
  width: fit-content;
  margin: 0 auto;
  margin-bottom: 5px;
  line-height: initial;
  display: inline-block;
}

.imgView {
  color: #2a72ee;
  cursor: pointer;
  margin-right: 10px;

  &:hover {
    text-decoration: underline;
  }
}

.imgcontainer {
  display: flex;
  justify-content: space-evenly;
  align-items: center;
  flex-wrap: wrap;

  img {
    width: 45%;
  }
}

::v-deep .star .el-form-item__label::before {
  content: "* ";
  color: red;
}

::v-deep .star {
  display: flex;
  align-items: center;

  .el-form-item__label {
    line-height: inherit;
  }

  .el-form-item__content {
    margin-left: 0 !important;
  }
}

.equipmentdialog ::v-deep .el-dialog__body .el-form {
  margin-left: -35px;
}

.imgitem {
  position: relative;
  height: 20px;
  cursor: pointer;

  .name {
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    color: #2a72ee;
    cursor: pointer;
  }
}

.viewfile {
  color: #2a72ee;
  cursor: pointer;
  display: inline-block;
  width: fit-content;

  &:hover {
    color: #2a72ee;
    text-decoration: underline;
  }
}

.viewCer {
  ::v-deep .el-upload--text {
    display: none;
  }

  ::v-deep .el-upload-list__item-name {
    transform: translateY(-5px);
  }
}

::v-deep .el-upload-list {
  display: inline-block;
  vertical-align: bottom;
  transform: translateY(-2px);
}

.pagination-container {
  position: relative !important;
  left: 0;
  bottom: 0;
}

::v-deep .el-dialog__body {
  max-height: 90vh;
  overflow-y: auto;
  overflow-x: hidden;
}
</style>
